<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>阻尼滚动</title>
  <style>
    /* 
    要点：
    scrollview 设置 transition 动画
    内容显示在容器大小的固定容器 fixed 容器中
    容器改变时，要将内容高度同步给body的高度，以便滚动条高度同步更新为内容的高度
    1. fixed 容器 > flex列布局的 scrollview容器
    2. 设置 body 高度为 scrollview 容器高度
    3. 滚动 body 时，设置scrollview的 translateY 的值
     */
    body {
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      background-color: #171717;
    }

    img {
      width: 80%;
      pointer-events: none;
      user-select: none;
    }

    .scrollbox {
      padding: 4rem 0;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      flex-shrink: 0;
      transition: .15s ease;
      gap: 4rem;
    }

    .viewbox {
      position: fixed;
      top: 0;
      display: flex;
      align-items: flex-start;
      width: 100%;
      height: 100vh;
    }
  </style>
</head>

<body>
  <div class="viewbox">
    <div class="scrollbox">
      <img src="https://picsum.photos/1600/900?random=1" alt="">
      <img src="https://picsum.photos/1600/900?random=2" alt="">
      <img src="https://picsum.photos/1600/900?random=3" alt="">
      <img src="https://picsum.photos/1600/900?random=4" alt="">
      <img src="https://picsum.photos/1600/900?random=5" alt="">
      <img src="https://picsum.photos/1600/900?random=6" alt="">
      <img src="https://picsum.photos/1600/900?random=7" alt="">
    </div>
  </div>
</body>
<script>
  let scrollbox = document.querySelector(".scrollbox")

  function resizeBody() {
    const height = scrollbox.offsetHeight;
    document.body.style.height = `${height}px`;
  }

  function scroll() {
    scrollbox.style.transform = `translateY(${-window.scrollY}px)`;
  }

  window.addEventListener('scroll', scroll)
  window.addEventListener('load', resizeBody)
  window.addEventListener('resize', resizeBody)
</script>

</html>